<template lang="html">
<div>
    <div class="page-head semibold">
      <span>杂谈</span><div class="img-wrapper"><img src="3_icon_search.png"></div>
    </div>
    <div class="page-main">
<div>
        <list :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData">
            <ul class="listItem">

                <li v-for="data in listdata" :class="'img-' + data.headimgpos + ' item clearfix'">
                    <router-link :to="'/main/article/'+data._id">
                        <div class="title semibold">{{data.title}}</div>
                        <div class="head-img-wrapper"><img class="head-img" v-lazy="data.headimg"></div>
                    </router-link>
                    <div class="sub">
                        <span v-if="data.top != 0" class="mounted">置顶</span><span class="time">{{new Date(Number(data.update_at.toString()+'000')).getFullYear()}}-{{new Date(Number(data.update_at.toString()+'000')).getMonth() + 1}}-{{new Date(Number(data.update_at.toString()+'000')).getDate()}}</span><span class="author">{{data.author.name}}</span><span class="comment"><img src="5_icon_comment.png"><span class="word">{{data.comments.length}}</span></span><span class="vote"><img src="6_icon_good.png"><span class="word">{{data.likes}}</span></span>
                    </div>
                </li>
            </ul>
        </list>
</div>
    </div>
    </div>
</template>
<style>
</style>
<script>
export default {
  data: function(){
    return {
        show: true,
        counter: 1, //当前页
        num: 10, // 一页显示多少条
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listdata: [], // 下拉更新数据存放数组
        scrollData: {
            noFlag: false //暂无更多数据显示
        }
    }
  },
  components: {
      'list': require("../components/List")
  },
  mounted: function() {
      this.getList();
  },
        methods: {
            getList() {
                this.$http.get('/categories/5b1deda3d854d814458bf4be')
                .then((response) => {
                    if(response.data.code == 1){
                        var msg = response.data.msg;
                        this.listdata = msg;
                    }else{
                        alert(response.data.msg);
                    }
                })
                .catch((err) => {
                    alert(err);
                });
            },
            onRefresh(done) {
                this.getList();
                done(); // call done
            },
            onInfinite(done) {
                this.counter++;
                let end = this.pageEnd = this.num * this.counter;
                let i = this.pageStart = this.pageEnd - this.num;

                let more = this.$el.querySelector('.load-more')
                for(i; i < end; i++) {
                    if(i >= 30) {
                        more.style.display = 'none'; //隐藏加载条
                        //走完数据调用方法
                        this.scrollData.noFlag = true;
                        break;
                    } else {
                        this.listdata.push({
                            date: "2017-06-1"+i,
                            portfolio: "1.5195"+i,
                            drop: i+"+.00 %" ,
                            state: 2
                        })
                        more.style.display = 'none'; //隐藏加载条
                    }
                }
                this.getList();
                        //走完数据调用方法
                        this.scrollData.noFlag = true;
                done();
            }

        }
}
</script>
